<template>
    <el-row>
        <el-row class="fen">
            <el-col :span="4" style="color: grey">
                <span class="title"></span>退货申请处理-{{row.applicationStatus | status}}
            </el-col>
            <el-col :span="5":offset="14">
                <el-button  @click="back"><i class="el-icon-arrow-left"></i>返回</el-button>
            </el-col>
        </el-row>
        <el-descriptions title="退货商品" direction="vertical" :column="7" border size="medium" v-if="row!=''">
            <el-descriptions-item label="商品图片"><el-image :src="detail.product.mainImage"/></el-descriptions-item>
            <el-descriptions-item label="商品名称">{{detail.product.productName}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{detail.product.currentpriceProduct}}</el-descriptions-item>
            <el-descriptions-item label="编号">{{detail.product.productCode}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{detail.productCount}}</el-descriptions-item>
            <el-descriptions-item label="类型">{{detail.orderType | typeFormatter}}</el-descriptions-item>
            <el-descriptions-item label="小计">{{detail.priceTotal | moneyFormatter}}</el-descriptions-item>
        </el-descriptions>
        <el-row class="fen">
            服务单信息
        </el-row>
        <el-descriptions class="margin-top"  :column="1"  border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    服务单号
                </template>
                {{row.serviceNo}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    申请状态
                </template>
                {{this.row.applicationStatus | status}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    订单编号
                </template>
                {{this.row.orderNo}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    申请时间
                </template>
                {{this.row.applicationTime}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    用户账号
                </template>
                    {{this.row.userId}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    联系人
                </template>
                {{this.row.realname}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    联系电话
                </template>
                    {{this.row.telephone}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    退货原因
                </template>
                {{this.row.reason}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    问题描述
                </template>
                {{this.row.problemDescribing}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    凭证照片
                </template>
                <span v-for="item in imgList"><img :src="item"/></span>
            </el-descriptions-item>
        </el-descriptions>
        <el-row v-if="row.applicationStatus==7">
            <el-button type="success" @click="agree(8)">同意</el-button>
            <el-button type="danger" @click="disagree">拒绝</el-button>
        </el-row>
    </el-row>
</template>

<script>
    import {Store as $store} from "vuex";
    export default {
        name: "returnDetail",
        data(){
            return{
                size:'medium',
                row:'',
                imgUrl:'',
                detail:'',
                orderNo:'',
                salesReturn:{
                    applicationStatus:'',
                    returnId:'',
                    orderNo:''
                },
                imgList:[]
            }
        },
        methods:{
            back() {
                this.$router.back()
            },
            agree(status){
                this.salesReturn.returnId=this.row.returnId;
                this.salesReturn.orderNo=this.row.orderNo;
                this.salesReturn.applicationStatus=status;
                console.log(this.salesReturn);
                this.$http({method:'post',url:"/order/setStatus",data:this.salesReturn}).then(res => {
                    console.log(res.data);
                    this.row.applicationStatus=status;
                })
            },
            disagree(status){
                this.salesReturn.returnId=this.row.returnId;
                this.salesReturn.orderNo=this.row.orderNo;
                this.salesReturn.applicationStatus=status;
                this.$http({method:'post',url:"/order/setStatus",data:this.salesReturn}).then(res => {
                    if(res.data.state==200){
                        this.$message('更新成功');
                    }else {
                        this.$message.error('更新失败');
                    }
                    console.log(res.data);
                    this.row.applicationStatus=status;
                })
            },
            getData(){
                this.$http({method:'get',url:"/order/getReturnDetail",params:{orderNo:this.row.orderNo}}).then(res => {
                    this.detail = res.data.data;
                    console.log(this.detail);
                    this.imgUrl=res.data.data.mainImage;
                })
            }
        },
        filters:{
            status(val){
                if(val==7){
                    return '退货申请'
                }
                if(val==8){
                    return '退货中'
                }
                if(val==9){
                    return '已退货'
                }
                if(val==10){
                    return '取消交易'
                }
                if(val==11){
                    return '已拒绝'
                }
            },

            source(val){
                if(val==2){
                    return '小程序';
                }
                if(val==3){
                    return 'APP';
                }
            },
            typeFormatter(val){
                if(val==2){
                    return '视频';
                }
                if(val==3){
                    return '商品';
                }
            },
            moneyFormatter(val){
                return '￥'+val;
            }
        },
        beforeCreate() {

           //
        },
        created() {

            this.row=this.$store.state.row;
            this.imgList=this.row.certificateImg.split(",");
            this.getData();
        }
    }
</script>

<style scoped>
    .fen{
        height: 50px;
        line-height: 50px;
        background-color: #F3F3F3;
    }
</style>